<template>
	<view>
		<view class="search">
			<view class="searchIput">
				<input type="text" placeholder="输入你要搜索的内容" placeholder-style='color:grey' v-model="inputs">
				<image src='@/static/search.png' />
			</view>
		</view>
		<view class="dataInfo" v-if="list.length > 0">
			<view class="dataList" v-for="(item, index) in searchData" :key="index" @click="toDetail(item.itemId)">
				<checkbox-group @click.stop="checkClick(item)">
					<checkbox :checked="item.checked" />
				</checkbox-group>
				<view class="details">
					<view class="img">
						<image :src="loadUrl + item.image"></image>
					</view>
					<view class="text">
						<text>{{item.name}}</text>
						<text>￥{{item.price}}</text>
					</view>
				</view>
				<view class="action">
					<text @click.stop="reduce(item)">-</text>
					<text>{{item.number}}</text>
					<text @click.stop="add(item)">+</text>
				</view>
				<view class="delete-btn" @click="deleteItem(index)">删除</view>
			</view>
		</view>
		<view class="empty-cart" v-else>
			<text>购物车里面是空的</text>
		</view>
		<view class="buy" v-if="list.length > 0">
			<view class="checked">
				<checkbox-group @tap="checkAll">
					<checkbox :checked="allChecked" />
				</checkbox-group>
				<text>全选</text>
			</view>
			<view class="total">
				<view class="price">
					<text>总计：</text>
					<text>￥{{totalPrice}}</text>
				</view>
				<view class="bill" @click="goToPayment">
					<text>结算</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allChecked: false,
				inputs: "",
				list: [],
				startX: 0,
				deleteButtonWidth: 80,
				loadUrl: this.$loadUrl
			}
		},
		computed: {
			totalPrice() {
				//总计金额
				var str = 0;
				for (var i = 0; i < this.searchData.length; i++) {
					if (this.searchData[i].checked) {
						str += this.searchData[i].number * this.searchData[i].newPrice;
					}
				}
				return str;
			},
			searchData: function() {
				//模糊查询
				if (!this.inputs) {
					return this.list;
				}
				return this.list.filter((item) => {
					return item.name.includes(this.inputs);
				});
			},
		},
		created() {
			this.getItemList()
		},
		onShow() {
			this.getItemList()
		},
		methods: {
			getItemList() {
				this.$service({
					url: '/carts'
				}).then(res => {
					if (res.code == 0) {
						let data = res.data
						data.forEach(item => {
							item.checked = false
							item.price /= 100
							item.newPrice /= 100
						})
						this.list = data
					}
				})
			},
			add(item) { //加加
				let num = item.number
				item.number = num + 1
				this.updateItemNumber(item, num + 1)
			},
			reduce(item) { //减减
				let num = item.number;
				if (num > 1) {
					num -= 1;
					item.number = num;
					this.updateItemNumber(item, num)
				} else if (num === 1) {
					uni.showToast({
						title: "该宝贝不能减少了哟~"
					});
				}
			},
			updateItemNumber(item, num) {
				this.$service({
					url: '/carts',
					method: 'PUT',
					data: {
						'id': item.id,
						'number': num
					}
				})
			},
			// 单个商品的选择
			checkClick(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const goods = this.list.every(item => {
						return item.checked === true
					})
					if (goods) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			//全选、全不选
			checkAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.list.map(item => {
						item.checked = true
					})
				} else {
					this.list.map(item => {
						item.checked = false
					})
				}
			},
			// 删除商品
			deleteItem(index) {
				this.list.splice(index, 1);
			},
			// 跳转到支付页面
			goToPayment() {
				const selectedItems = this.list.filter(item => item.checked); // 获取已选中的商品
				if (selectedItems.length === 0) {
					uni.showModal({
						title: '提示',
						content: '请先选择商品',
						showCancel: false
					});
					return;
				}

				// 调用接口，将选中的商品发送到后端
				this.$service({
					url: '/orders',
					method: 'POST',
					data: selectedItems.map(item => ({
						itemId: item.itemId, // 商品ID
						num: item.number, // 商品数量
					}))
				}).then(res => {
					if (res.code === 0) {
						// 订单创建成功，跳转到订单页面
						setTimeout(() => {
							uni.$emit('orderId', res.data)
						}, 300)
						uni.navigateTo({
							url: '/pages/payment/payment' // 假设后端返回订单ID
						});

					} else {
						// 处理错误
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				}).catch(err => {
					// 处理请求失败的情况
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				});
			},
			toDetail(id) {
				// setTimeout(()=>{
				// 	uni.$emit('detail',id)
				// },300)
				uni.setStorageSync('currentItemId', id)
				uni.navigateTo({
					url: '/pages/goods/goods',
				});
			}
		}
	}
</script>

<style>
	/deep/uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
	}

	/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: #ddd;
		color: #fff !important;
		background-color: #2DCF8C !important;
	}

	/deep/uni-checkbox .uni-checkbox-input {
		border-color: #ddd;
	}

	/deep/uni-checkbox .uni-checkbox-input:hover {
		border-color: #ddd;
	}

	.search {
		padding-top: 20rpx;
	}

	.search .searchIput {
		background-color: #e6e6e6;
		width: 95%;
		margin: 0 auto;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 50rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.search .searchIput input {
		font-size: 26rpx;
		width: 100%;
		color: grey;
	}

	.search .searchIput image {
		width: 34rpx;
		height: 34rpx;
	}



	.dataInfo {
		width: 95%;
		margin: 0 auto;
	}

	.dataInfo .dataList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #F1F1F1;
		padding: 25rpx 0;
		position: relative;
	}

	.dataInfo .dataList .details {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 0;
	}

	.dataInfo .dataList .delete-btn {
		position: absolute;
		top: 0;
		right: -98rpx;
		width: 80rpx;
		height: 100%;
		background-color: #ff0000;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.dataInfo .dataList .details .img image {
		width: 200rpx;
		height: 200rpx;
		padding: 0 20rpx;
	}

	.dataInfo .dataList .details .text text {
		color: #000;
		font-size: 23rpx;
		display: block;
		padding: 10rpx 0;
	}

	.dataInfo .dataList .details .text text:last-child {
		color: red;
		font-size: 25rpx;
	}

	.dataInfo .dataList .action text {
		font-size: 25rpx;
		color: #000;
		border: 1px solid #C8C7CC;
		display: inline-block;
		line-height: 50rpx;
		width: 60rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.dataInfo .dataList .action text:nth-child(2) {
		border-left: none;
		border-right: none;
	}

	.buy {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 50%;
		bottom: 0;
		width: 95%;
		transform: translate(-50%, 0);
	}

	.buy .checked {
		display: flex;
		align-items: center;
	}

	.buy .checked text {
		font-size: 25rpx;
		color: #000;
		padding: 0 12rpx;
	}

	.buy .total {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buy .total .price {
		padding-right: 20rpx;

	}

	.buy .total .price text {
		font-size: 27rpx;
		color: #C8C7CC;
		display: inline-block;
	}

	.buy .total .price text:last-child {
		color: red;
		font-weight: bold;
	}

	.buy .total .bill text {
		font-size: 25rpx;
		border-radius: 50rpx;
		color: #fff;
		display: inline-block;
		background-color: red;
		line-height: 70rpx;
		width: 150rpx;
		text-align: center;
	}

	.dataList {
		transition: transform 0.3s ease;
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: -80rpx;
		width: 80rpx;
		height: 100%;
		background-color: #ff0000;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.empty-cart {
		width: 100%;
		text-align: center;
		padding: 50rpx 0;
		margin-top: 60%;
	}

	.empty-cart text {
		font-size: 40rpx;
		color: grey;
	}
</style>